<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>编辑 EPUB</title>
  <link href="../Styles/styles.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  <h2>代码视图快速入门</h2>

  <h3 class="sigil_not_in_toc">代码视图</h3>

  <p>That’s quite a lot of text, but it’s not as jumbled as it appears. First, ignore everything at the top of the file up to and including the <span class="example">&lt;body&gt;</span> tag on line 11 in this example. The "header" is just information required by HTML files and not something you normally need to change.</p>
  <p>文字很多，但是看起来不那么混乱。首先，在此示例中，忽略文件顶部的所有内容，直到第 11 行的 <span class="example">&lt;body&gt;</span> 标签为止。“标题”仅是 HTML 文件所需的信息，而不是通常需要更改的信息。</p>

  <p>Your text starts after the <span class="example">&lt;body&gt;</span> tag:</p>
  <p>您的文本在 <span class="example">&lt;body&gt;</span> 标记之后开始：</p>

  <div class="image">
    <img alt="tutorial-cv" src="../Images/tutorial-cv.png"/>
  </div>

  <p>You can see all the same words that are shown in Preview – the chapter name "Introduction" and several paragraphs of text. But you can also see the HTML code tags that tell readers how to display that text.</p>
  <p>您可以看到与预览中显示的所有相同的单词-章节名称“简介”和几段文字。但是您也可以看到 HTML 代码标签，这些标签告诉读者如何显示该文本。</p>

  <h3 class="sigil_not_in_toc">HTML 基础</h3>

  <p>A full description of HTML is beyond this tutorial, but understanding the basics will help you edit your text.</p>
  <p>对 HTML 的完整描述超出了本教程的范围，但是了解基础知识将有助于您编辑文本。</p>

  <p>If you look at the HTML version of your file in Code View you will see lots of words like <span class="example">&lt;p&gt;</span> or <span class="example">&lt;h1&gt;</span>, etc. These are the HTML tags that tell ereaders what to do with your text.</p>
  <p>如果您在“代码视图”中查看文件的 HTML 版本，则会看到很多单词，例如 <span class="example">&lt;p&gt;</span> 或 <span class="example">&lt;h1&gt;</span> 等。这些是 告诉电子阅读器如何处理文本的 HTML 标记。</p>

  <p>For instance, the HTML code below tells the ereader that the text <span class="example">Chapter 8</span> is a level 1 Heading:</p>
  <p>例如，下面的 HTML 代码告诉电子阅读器，文本 <span class="example">Chapter 8</span> 是第 1 级标题：</p>

  <pre class="example">&lt;h1&gt;Chapter 8&lt;/h1&gt;</pre>

  <p>The <span class="example">&lt;h1&gt;</span> tag is the start of the text to be treated like a heading, and the <span class="example">&lt;/h1&gt;</span> tag indicates the end of the text included in the heading. This is what Sigil enters into your document when you click the <img alt="heading-1_22px" src="../Images/heading-1_22px.png"/> button. Ereaders will typically make the text of a heading larger and center it on the screen.</p>
  <p><span class="example">&lt;h1&gt;</span> 标记是将文本视为标题的开头，而 <span class="example">&lt;/h1&gt;</span> 标记则表示包含在其中的文本的结尾 标题。单击 <img alt="heading-1_22px" src="../Images/heading-1_22px.png"/> 按钮后，Sigil 便会在文档中输入此内容。电子阅读器通常会将标题的文本放大并在屏幕上居中。</p>

  <p>The HTML code below tells the ereader that the text <span class="example">This is a paragraph</span> is an ordinary paragraph. Since it’s a paragraph the ereader will apply a certain formatting, perhaps indenting the first line.</p>
  <p>下面的 HTML 代码告诉电子阅读器，文本 <span class="example">This is a paragraph</span> 是普通段落。由于是段落，因此阅读器将采用某种格式，可能会缩进第一行。</p>

  <pre class="example">&lt;p&gt;This is a paragraph.&lt;/p&gt;</pre>

  <p>There are many more tags in HTML. The important point to remember is that the HTML tags tell ereaders how to format and display your content. They allow you to keep your content separate from your formatting which makes it easier to change how your book looks.</p>
  <p>HTML 中还有更多标签。要记住的重要一点是 HTML 标记告诉电子阅读器如何格式化和显示您的内容。它们使您可以将内容与格式分开，从而更容易更改书的外观。</p>

  <p>HTML tags can get more fancy since they can include attributes that modify how they are interpreted. For example, here is a paragraph with some tags that define an ID used for linking as shown in the last chapter:</p>
  <p>HTML 标记可以包含可以修改其解释方式的属性，因此可以更加花哨。例如，这是一个带有一些标记的段落，这些标记定义了用于链接的 ID，如上一章所示：</p>

  <pre class="example">&lt;p&gt;&lt;span id="note1"&gt;This is a note&lt;/span&gt; for linking.&lt;/p&gt;</pre>

  <p>The span tag is used around small sections of text that need to be formatted differently or to contain information. In this case the information is that the words "This is a note" has an ID of "note1". The span tags with the ID attribute are the code that Sigil inserts when you use Insert ID.</p>
  <p>span 标签用于需要格式化或包含信息的小部分文本。在这种情况下，信息是单词“This is note”的 ID 为“note1”。具有 ID属性的 span 标签是 Sigil 在使用“插入 ID”时插入的代码。</p>

  <p>These are just a few examples of HTML code, but they give you an idea of what the majority of HTML is all about.</p>
  <p>这些只是 HTML 代码的一些示例，但是它们使您了解大多数 HTML 的含义。</p>

  <p>What is important to remember is that in Code View you have access to both your text and the formatting codes that control the look of your book – so you can find and change them.</p>
  <p>要记住的重要一点是，在“代码视图”中，您可以访问文本和用于控制书籍外观的格式代码，因此可以查找和更改它们。</p>

  <div class="tip">
    <p class="tiptext">See the <a href="../Text/introduction.html">Introduction</a>, <a href="../Text/code_view.html">Code View</a> and <a href="../Text/tutorial_stylesheets.html">Stylesheets</a> chapters for more details.</p>
    <p class="tiptext">有关更多详细信息，请参见 <a href="../Text/introduction.html">简介</a>，<a href="../Text/code_view.html">代码视图</a> 和 <a href="../Text/tutorial_stylesheets.html">样式表</a> 章节。</p>
  </div>

  <h3 class="sigil_not_in_toc">在代码视图中编辑</h3>

  <p>Try changing some of your words (but not the HTML tags just yet), and then watch the changes in Preview.</p>
  <p>尝试更改某些单词（但尚未更改 HTML 标记），然后在“预览”中观察更改。</p>

  <div class="tip">
    <p class="tiptext">It is essential that you edit carefully. You will need to make sure all the tags you use are valid and are opened and closed properly – if they aren’t, you will get a pink error warning in Preview and you will be unable to save your EPUB until they are fixed.</p>
    <p class="tiptext">仔细编辑非常重要。您需要确保使用的所有标签都是有效的，并且可以正确打开和关闭——如果不是，则在预览中会出现粉红色的错误警告，并且除非修复，否则您将无法保存 EPUB。</p>
  </div>

  <h3 class="sigil_not_in_toc">预览</h3>

  <p>To really see changing the code in action, you can open the Preview window using View→Preview (you can always close it using View→Preview or its shortcut again). You may need to make the window bigger or drag it to another part of your desktop.</p>
  <p>要真正看到正在更改的代码，可以使用“视图”→“预览”打开“预览”窗口（您始终可以再次使用“视图”→“预览”或其快捷方式将其关闭）。您可能需要扩大窗口或将其拖动到桌面的另一部分。</p>

  <p>You can type in Code View and Preview will update to show your changes after a second.</p>
  <p>您可以输入“代码视图”，并且“预览”将更新以显示您的更改。</p>

  <div class="image">
    <img alt="tutorial-preview" src="../Images/tutorial-preview.png"/>
  </div>

  <div class="tip">
    <p class="tiptext">Save often to have your code checked for any errors to catch them early.</p>
    <p class="tiptext">经常保存以检查您的代码是否有任何错误，以便尽早发现它们。</p>
  </div>
</body>
</html>